import { PureComponent } from 'react'
import { connect } from 'react-redux';
import * as action from '../../actions/user'
import { Link } from 'react-router-dom'
import Errors from '../../components/Errors'


class Regist extends PureComponent {

  changeUserEmail = (ev) => {
    this.props.onEmailChange('email', ev.target.value)
  }

  changeUserName = ev => {
    this.props.onUsernameChange('username', ev.target.value)
  }

  changePassword = ev => {
    this.props.onPasswordChange('password', ev.target.value)
  }

  //state 是在组件里
  onSubmitForm = (email, username, password) => (ev) => {
    ev.preventDefault()
    //网络接口请求 ： 注册
    this.props.onSubmitUser({ email, username, password })
  }

  render() {
    const { email, username, password, errors } = this.props
    // console.log('resig errors', errors);
    return (
      <div className='container page'>
        <div className='row'>
          <div className='col-md-6 offset-md-3 col-xs-12'>
            <h1>注册</h1>

            {/* 调转到登录 */}
            <p className='text-xs-center'>
              <Link to='/login'>
                有账号直接登录?
              </Link>
            </p>


            {/* 错误显示 */}
            <Errors errors={errors} />

            <form onSubmit={this.onSubmitForm(email, username, password)}>
              <fieldset className='form-group'>
                <input
                  className='form-control form-control-lg'
                  type="text"
                  placeholder='用户邮箱'
                  value={email}
                  onChange={this.changeUserEmail}
                />
              </fieldset>
              <fieldset className='form-group'>
                <input
                  className='form-control form-control-lg'
                  type="text"
                  placeholder='用户名称'
                  value={username}
                  onChange={this.changeUserName}
                />
              </fieldset>
              <fieldset className='form-group'>
                <input
                  className='form-control form-control-lg'
                  type="password"
                  placeholder='用户密码'
                  value={password}
                  onChange={this.changePassword}
                />
              </fieldset>
              <button
                className='btn btn-lg btn-primary pull-xs-right'
                type='submit'
              >
                注册
              </button>
            </form>
          </div>
        </div>
      </div>
    )

  }
  componentWillUnmount() {
    this.props.onUnload()
  }
}

//数据
// const mapState= state=>{
//   console.log(state.user); //细分reducer
//   return {...state.user}  // {email:'',username:'',password:''}
// }

const mapState = state => ({ ...state.user })

//行为
const mapDispatch = dispatch => {
  return {
    onEmailChange: (key, value) => dispatch(action.userFieldUpdate(key, value)),
    onUsernameChange: (key, value) => dispatch(action.userFieldUpdate(key, value)),
    onPasswordChange: (key, value) => dispatch(action.userFieldUpdate(key, value)),
    onSubmitUser: (user) => dispatch(action.registSubmit(user)),
    onUnload: () => dispatch(action.unload())
  }
}


export default connect(mapState, mapDispatch)(Regist)